<template>
  <div id="user_fill">
    <div>
      <k-header headTitle="填写发票" goBack="true" rightTitle="提交" @rightClick="fillBtn"/>
    </div>
    <div class="fillist" :class="headIos?'side-fixd-ios':'side-fixed'">
      <group class="user_base_infor">
        <div class="bo gra_base_infor">
          <cell title="基本信息" disabled  />
        </div>
        <div class="bo">
          <cell title="发票抬头" >
            <input type="text" placeholder="请输入抬头" class="lookup" v-model="lookup"/>
          </cell>
        </div>
        <div class="bo">
          <cell title="发票内容" is-link />
        </div>
        <div class="bo gra_base_infor">
          <cell title="邮寄信息" disabled  />
        </div>
        <div class="bo">
          <cell title="收件人" >
            <input type="text" placeholder="请输入收件人姓名" class="look_name" v-model="look_name" />
          </cell>
        </div>
        <div class="bo">
          <cell title="联系电话" >
            <input type="text" placeholder="请输入收件人联系电话" class="look_tel" v-model="look_tel" />
          </cell>
        </div>
      </group>
      <div class="look_adds">
        <div style="float:left;margin-right:1rem;">详细地址</div>
        <div style="float:right;width: 70%;padding: 0 1rem;">
          <textarea name="" id="" rows="10" class="look_addr" placeholder="请填写详细邮寄地址" v-model="look_addr"></textarea>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import kHeader from '../common/head'
import { Cell, Group } from 'vux'
import util from '../../libs/util'
export default {
  name: 'userfill',
  data() {
    return {
      lookup: '',
      look_name: '',
      look_tel: '',
      look_addr: '',
      headIos: false
    }
  },
  components: {
    kHeader,
    Cell,
    Group
  },
  created() {
    if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
      this.headIos = true;
    }
  },
  methods: {
    fillBtn: function() {
      let url = 'lblsapp-h5/v2/memberInfo/invoiceset.json';
      var datas= {};
      datas.invoiceTitle = this.lookup;
      datas.contactName = this.look_name;
      datas.contactPhone = this.look_tel;
      datas.address = this.look_addr;
      // datas.invoicePrice = 100.00;
      datas.invoiceContent = '餐饮';
      console.log(datas);
      util.ajax.post(url, datas).then(function(stats) {
        console.log(stats);
      }).catch(function(error) {
        console.log(error);
      })
    }
  }
}
</script>

<style scoped>
  .bo {
    border-bottom: 1px solid #eee;
  }
  .fillist {
    padding: 45px 0 0 0;
  }
  .side-fixd-ios {
    padding: 65px 0 0 0;
  }
  .fillist input {
    height: 100%;
    border: none;
    outline: none;
    text-align: right;
  }
  .fillist .lookup {width: 46%;}
  .look_name {width: 55%;}
  .look_adds {
    height: 60px;    
    overflow:hidden;
    padding: 10px 0 10px .8rem;
    background-color: #fff;
    font-size: 1.4rem;
  }
  .look_addr {
    resize:none;
    border: none;
    width: 100%;
    height: 60px;
    /* text-align: right; */
    font-size: 1.4rem;
    outline: none;
    line-height: 1.8rem;
  }
  .user_base_infor {
    margin-top: 0;    
  }
  .gra_base_infor .weui-cell {
    font-size: 0.12rem;
  }
  .weui-cells {
    margin-top: 0;
  }
  .weui-cell {
    padding: 10px !important;
    font-size: 14px;
  }
  .weui-cell:before {
    border-top: #f5f5f5;
  }
  .gra_base_infor {
    background-color: #f5f5f5;
  }
</style>

